<template>
  <div class="category-search-form">
    <SearchForm
      :fields="searchFields"
      :model-value="searchParams"
      :loading="loading"
      @update:model-value="handleSearchParamsChange"
      @search="handleSearch"
      @reset="handleReset"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SearchForm from '@/components/SearchForm/index.vue'
import type { SearchField } from '@/types'

interface Props {
  loading?: boolean
}

interface Emits {
  (e: 'search', params: Record<string, any>): void
  (e: 'reset'): void
  (e: 'update:searchParams', params: Record<string, any>): void
}

withDefaults(defineProps<Props>(), {
  loading: false
})

const emit = defineEmits<Emits>()

// 搜索参数
const searchParams = ref<Record<string, any>>({})

// 搜索字段配置
const searchFields: SearchField[] = [
  {
    prop: 'categoryName',
    label: '分类名称',
    type: 'input',
    placeholder: '请输入分类名称'
  },
  {
    prop: 'parentId',
    label: '父级分类',
    type: 'select',
    placeholder: '请选择父级分类',
    options: [
      { label: '全部', value: '' },
      { label: '顶级分类', value: 0 },
      { label: '请假流程', value: 1 },
      { label: '报销流程', value: 2 }
    ]
  },
  {
    prop: 'createTime',
    label: '创建时间',
    type: 'daterange',
    placeholder: '请选择创建时间',
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期'
  }
]

// 处理搜索参数变化
const handleSearchParamsChange = (params: Record<string, any>) => {
  searchParams.value = params
  emit('update:searchParams', params)
}

// 处理搜索
const handleSearch = (params: Record<string, any>) => {
  emit('search', params)
}

// 处理重置
const handleReset = () => {
  searchParams.value = {}
  emit('update:searchParams', {})
  emit('reset')
}
</script>

<style scoped>
.category-search-form {
  margin-bottom: 16px;
}
</style>
